import { TextField } from "@/components/textfield/textfield";
import { Button } from "@/components/button/button";
import "./googleLogin.scss";
import { TextFieldContainer } from "@/components/textfieldContainer/textfieldContainer";
import { useVerification } from "@/utils/hook";
import { useState } from "react";

interface GoolgleLogin {
  onClick: () => void;
}
export const GoolgleLogin = ({ onClick }: GoolgleLogin): React.ReactElement => {
  const { verification } = useVerification();
  // 正则
  const accountReg: RegExp = /^[a-zA-Z0-9._%+-]+@gmail\.com$/;
  const passwordReg: RegExp =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+[\]{}|\\:;<>,.?/~`-]{8,}$/;
  const subEmailReg: RegExp =
    /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

  // 接口数据
  const [goolgleAccount, setGoolgleAccount] = useState("");
  const [goolglePassword, setGoolglePassword] = useState("");
  const [goolgleSubEmail, setGoolgleSubEmail] = useState("");

  // 输入框报错以及报错信息
  const [accountError, setAccountError] = useState(false);
  const [accountErrorMessage, setAccountErrorMessage] = useState("");
  const [passwordError, setPasswordError] = useState(false);
  const [passwordErrorMessage, setPasswordErrorMessage] = useState("");
  const [subEmailError, setSubEmailError] = useState(false);
  const [subEmailErrorMessage, setSubEmailErrorMessage] = useState("");

  const batchLoginClick = () => {
    let data = {
      acc: goolgleAccount,
      pwd: goolglePassword,
      recover: goolgleSubEmail,
    };
    if (!accountError && !passwordError && !subEmailError) {
      console.log("请求成功");
      onClick?.();
      console.log(data);
      setGoolgleAccount("");
      setGoolglePassword("");
      setGoolgleSubEmail("");
    }
  };
  return (
    <>
      <div className="goolgle_login_box">
        <div className="goolgle_textfield_box">
          <TextFieldContainer>
            <TextField
              type="text"
              placeholder="请输入谷歌账号"
              className="textfieltd"
              label="账号:"
              error={accountError}
              errorMessage={accountErrorMessage}
              value={goolgleAccount}
              onChange={(e) =>
                verification(
                  setAccountError,
                  setAccountErrorMessage,
                  "账号不能为空",
                  e,
                  setGoolgleAccount,
                  "谷歌邮箱格式不正确",
                  accountReg
                )
              }
            />
            <TextField
              type="password"
              placeholder="请输入密码"
              className="textfieltd"
              label="密码:"
              error={passwordError}
              errorMessage={passwordErrorMessage}
              value={goolglePassword}
              onChange={(e) =>
                verification(
                  setPasswordError,
                  setPasswordErrorMessage,
                  "密码不能为空",
                  e,
                  setGoolglePassword,
                  "密码格式不正确",
                  passwordReg
                )
              }
            />
            <TextField
              type="text"
              placeholder="请输入辅助邮箱"
              className="textfieltd"
              label="辅助邮箱:"
              error={subEmailError}
              errorMessage={subEmailErrorMessage}
              value={goolgleSubEmail}
              onChange={(e) =>
                verification(
                  setSubEmailError,
                  setSubEmailErrorMessage,
                  "辅助邮箱不能为空",
                  e,
                  setGoolgleSubEmail,
                  "辅助邮箱格式不正确",
                  subEmailReg
                )
              }
            />
            <TextField
              type="text"
              placeholder="请输入密码"
              className="textfieltd"
              label="用户名:"
            />
          </TextFieldContainer>
        </div>
        <div className="goolgle_button_box">
          <Button label={"确定"} onClick={batchLoginClick} />
          <Button label={"重置"} />
        </div>
      </div>
    </>
  );
};
